<template>
  <div class="clock">
    <Header></Header>
    <div class="img">
      <img src="../assets/image/other/trade.jpg" alt="" />
    </div>
    <div class="box-card">
      <div class="box-card__main">
        <h1>现在就来换购 旧机最高抵1000</h1>
        <div class="text-gray text-center">
          活动时间:09月08日00点-09月30日23点
        </div>
        <table class="m-table">
          <thead>
            <tr class="text-gray">
              <td>换新机型</td>
              <td>换新前活动价</td>
              <td>库存状态</td>
              <td>产品详情</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>DEEBOT T9 POWER</td>
              <td><b>￥ 2699</b></td>
              <td class="red">进行中</td>
              <td>
                <a
                  href="https://mall.ecovacs.cn/trade-in-detail-9-4408.html?referer=trade_in_index"
                  class="red"
                  target="_blank"
                  >查看 &gt;</a
                >
              </td>
            </tr>
            <tr>
              <td>DEEBOT N9＋</td>
              <td><b>￥ 3699</b></td>
              <td class="red">进行中</td>
              <td>
                <a
                  href="https://mall.ecovacs.cn/trade-in-detail-9-4407.html?referer=trade_in_index"
                  class="red"
                  target="_blank"
                  >查看 &gt;</a
                >
              </td>
            </tr>
            <tr>
              <td>DEEBOT T9 AIVI＋</td>
              <td><b>￥ 4999</b></td>
              <td class="red">进行中</td>
              <td>
                <a
                  href="https://mall.ecovacs.cn/trade-in-detail-9-4410.html?referer=trade_in_index"
                  class="red"
                  target="_blank"
                  >查看 &gt;</a
                >
              </td>
            </tr>
            <tr>
              <td>WINBOT W920</td>
              <td><b>￥ 2499</b></td>
              <td class="red">进行中</td>
              <td>
                <a
                  href="https://mall.ecovacs.cn/trade-in-detail-9-4412.html?referer=trade_in_index"
                  class="red"
                  target="_blank"
                  >查看 &gt;</a
                >
              </td>
            </tr>
            <tr>
              <td>AIRBOT ANDY PRO</td>
              <td><b>￥ 6599</b></td>
              <td class="red">进行中</td>
              <td>
                <a
                  href="https://mall.ecovacs.cn/trade-in-detail-9-4413.html?referer=trade_in_index"
                  class="red"
                  target="_blank"
                  >查看 &gt;</a
                >
              </td>
            </tr>
          </tbody>
        </table>
        <div class="tips text-gray">
          <p>
            *以旧换新参与机器包括：科沃斯品牌机器人、科沃斯分享品或官翻机、其他品牌扫地机器人和擦窗机器人
          </p>
          <p>
            *若本次活动没有你心仪的新机，请留下你的联系方式及期望的新机型号，方便下次活动前短信通知，<br /><a
              href="javascript:void(0)"
              class="red J-openHxNotice"
              >前往填写&gt;</a
            >
          </p>
        </div>
      </div>
    </div>
    <div class="section">
      <img src="../assets/image/other/img03.jpg" alt="" />
    </div>
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 侧边咨询客服按钮 -->
    <consult-serve></consult-serve>
    <div class="dialog-content">
      <div id="hx-notice">
        <img src="../assets/image/other/20210901094547_78685.png" alt="" />
      </div>
    </div>
    <div class="mask"></div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import ConsultServe from "../components/ConsultServe.vue";
export default {
  components: {
    Header,
    Footer,
    ConsultServe,
  },
};
</script>

<style scoped>
.dialog-content {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.mask {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  z-index: 9;
  opacity: 0.7;
}
.box-card {
  color: #333;
  font-family: "Microsoft Yahei", arial, "Hiragino Sans GB", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 20px;
}
.box-card__main {
  font-family: "Microsoft Yahei", arial, "Hiragino Sans GB", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
  font-size: 20px;
  margin: 0 auto;
  padding: 80px 0;
  width: 880px;
  color: #253746;
  font-weight: 300;
}
.box-card__main h1 {
  font-family: "Microsoft Yahei", arial, "Hiragino Sans GB", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
  color: #253746;
  padding: 0;
  margin: 0;
  font-weight: 400;
  margin-bottom: 20px;
  font-size: 30px;
  text-align: center;
}
.box-card__main .text-gray {
  font-family: "Microsoft Yahei", arial, "Hiragino Sans GB", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
  font-size: 20px;
  font-weight: 300;
  padding: 0;
  margin: 0;
  text-align: center !important;
  color: #999 !important;
}
.box-card__main .m-table {
  font-family: "Microsoft Yahei", arial, "Hiragino Sans GB", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
  color: #253746;
  font-weight: 300;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
  width: 100%;
  margin-top: 20px;
}
thead {
  font-family: "Microsoft Yahei", arial, "Hiragino Sans GB", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
  color: #253746;
  font-weight: 300;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
}
tr {
  font-family: "Microsoft Yahei", arial, "Hiragino Sans GB", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
  color: #253746;
  font-weight: 300;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
}
td {
  font-family: "Microsoft Yahei", arial, "Hiragino Sans GB", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
  color: #253746;
  font-weight: 300;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  font-size: 20px;
  height: 73px;
  vertical-align: middle;
  border-top: 1px solid #edeeef;
  padding: 0 30px;
  width: 450px;
  box-sizing: border-box;
}
.section {
  position: relative;
  width: 100%;
  background-color: #fff;
}
.section img {
  margin: 0 auto;
  display: block;
  max-width: 100%;
}
</style>